To'liq ekranli API: Mazmunli kontent tajribalarini taqdim eting

To'liq ekranli API veb-dasturchilarga haqiqatan ham qamrab oluvchi va jozibali foydalanuvchi tajribalarini yaratish imkonini beruvchi kuchli vositadir. Veb-kontentga butun ekranni egallashga imkon berish orqali u chalg'ituvchi narsalarni yo'q qiladi va foydalanuvchi e'tiborini taqdim etilgan ma'lumot yoki interaktiv elementlarga qaratadi. Bu imkoniyat video striming va o'yinlardan tortib taqdimotlar, kiosk rejimlari va undan tashqari keng ko'lamli ilovalar uchun bebahodir. Ushbu qo'llanma To'liq ekranli API'ning nozikliklarini chuqur o'rganib, uning imkoniyatlaridan samarali foydalanish va amalga oshirish uchun sizga bilim va amaliy misollar taqdim etadi.

To'liq ekranli API'ni tushunish

Aslini olganda, To'liq ekranli API har qanday HTML elementi uchun to'liq ekran rejimini so'rash va boshqarishning standartlashtirilgan usulini taqdim etadi. Ushbu API paydo bo'lishidan oldin, to'liq ekran funksiyasiga erishish ko'pincha brauzerga xos xakerlik va nomuvofiq xatti-harakatlarni o'z ichiga olgan. To'liq ekranli API turli brauzerlar va qurilmalarda izchil va ishonchli yondashuvni taklif etadi.

To'liq ekranli API'ning asosiy tarkibiy qismlari

• requestFullscreen(): HTML elementida chaqiriladigan ushbu metod, o'sha elementning to'liq ekran rejimiga kirishini so'raydi.
• exitFullscreen(): `document` obyektida mavjud bo'lgan ushbu metod, to'liq ekran rejimidan chiqadi.
• fullscreenElement: `document` obyektining ushbu xususiyati hozirda to'liq ekran rejimida bo'lgan elementni qaytaradi, agar hech qaysi element to'liq ekranda bo'lmasa, `null` qaytaradi.
• fullscreenEnabled: `document` obyektining ushbu xususiyati to'liq ekran rejimi mavjudligini bildiradi. E'tibor bering, ba'zi brauzerlar to'liq ekranni yoqishdan oldin foydalanuvchi aralashuvini talab qilishi mumkin.
• fullscreenchange hodisasi: Ushbu hodisa to'liq ekran holati o'zgarganda (ya'ni, element to'liq ekranga kirganda yoki chiqqanda) ishga tushadi.
• fullscreenerror hodisasi: Ushbu hodisa to'liq ekran rejimiga kirishga urinish paytida xatolik yuz berganda ishga tushadi.

To'liq ekranli API'ni joriy etish: Amaliy qo'llanma

To'liq ekranli API'ni joriy etish bir necha asosiy qadamlarni o'z ichiga oladi. Keling, JavaScript yordamida amaliy misolni ko'rib chiqamiz.

1-qadam: Maqsadli elementni aniqlash

Birinchidan, to'liq ekranda ko'rsatmoqchi bo'lgan HTML elementni aniqlashingiz kerak. Bu video pleyer, rasm, kanvas elementi yoki qamrab oluvchi displeydan foyda ko'radigan boshqa har qanday element bo'lishi mumkin.

            const element = document.getElementById('myElement');
            

              
                Copy
              
            
          

2-qadam: To'liq ekran rejimini so'rash

Keyin, maqsadli elementda `requestFullscreen()` metodini ishga tushiradigan hodisa tinglovchisini (masalan, tugma bosilishi) qo'shishingiz kerak. E'tibor bering, eski brauzerlarda metod nomi vendor-prefiksli bo'lishi mumkin (bu haqda keyinroq batafsil).

            function enterFullscreen() {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) { /* Firefox */
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) { /* IE/Edge */
    element.msRequestFullscreen();
  }
}

const fullscreenButton = document.getElementById('fullscreenButton');
fullscreenButton.addEventListener('click', enterFullscreen);

            

              
                Copy
              
            
          

3-qadam: To'liq ekran rejimidan chiqish

Foydalanuvchilarga to'liq ekran rejimidan chiqishga ruxsat berish uchun `document` obyektidagi `exitFullscreen()` metodidan foydalanishingiz mumkin. To'liq ekranni so'rashga o'xshab, vendor prefikslarini boshqarishingiz kerak bo'ladi.

            function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) { /* Firefox */
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE/Edge */
    document.msExitFullscreen();
  }
}

const exitFullscreenButton = document.getElementById('exitFullscreenButton');
exitFullscreenButton.addEventListener('click', exitFullscreen);

            

              
                Copy
              
            
          

4-qadam: `fullscreenchange` hodisasini boshqarish

`fullscreenchange` hodisasi to'liq ekran holati o'zgarganda aniqlash imkonini beradi. Bu UI'ni yangilash yoki joriy holatga asoslangan boshqa amallarni bajarish uchun foydalidir.

            document.addEventListener('fullscreenchange', function (event) {
  if (document.fullscreenElement) {
    console.log('To\'liq ekran rejimiga kirildi');
    // To'liq ekranga kirganda amallarni bajarish
  } else {
    console.log('To\'liq ekran rejimidan chiqildi');
    // To'liq ekrandan chiqqanda amallarni bajarish
  }
});

            

              
                Copy
              
            
          

5-qadam: `fullscreenerror` hodisasini boshqarish

`fullscreenerror` hodisasi to'liq ekran rejimiga o'tishga to'sqinlik qiladigan xatolikni aniqlashga imkon beradi. Bu xatoliklarni chiroyli tarzda boshqarish va foydalanuvchini xabardor qilish uchun yordam beradi. Umumiy sabablar ruxsat cheklovlari yoki qo'llab-quvvatlanmaydigan brauzer sozlamalarini o'z ichiga oladi. Foydalanuvchilarni brauzer sozlamalarini yangilashga yoki muqobil brauzerdan foydalanishga yo'naltiruvchi xabar ko'rsatish kabi zaxira mexanizmini amalga oshirishni ko'rib chiqing.

            document.addEventListener('fullscreenerror', function (event) {
    console.error('To\'liq ekran xatosi:', event);
    // Foydalanuvchiga xato xabarini ko'rsatish
    alert('To\'liq ekran rejimini yoqib bo\'lmadi. Iltimos, brauzeringiz to\'liq ekranni qo\'llab-quvvatlashiga va kerakli ruxsatlarni berganingizga ishonch hosil qiling.');
});

            

              
                Copy
              
            
          

Brauzerlararo muvofiqlik: Vendor prefikslarini hal qilish

Tarixiy jihatdan, turli brauzerlar To'liq ekranli API'ni vendorga xos prefikslar bilan amalga oshirgan. Zamonaviy brauzerlar asosan prefikssiz versiyalarni qo'llab-quvvatlasa-da, moslikni ta'minlash uchun eski brauzerlar uchun vendor prefikslarini qo'shish juda muhimdir. Yuqoridagi misollar bu prefikslarni shartli tekshiruvlar yordamida qanday boshqarishni ko'rsatadi.

Yordamchi funksiya bu jarayonni soddalashtirishi mumkin:

            function requestFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) { // Firefox 
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) { // Chrome, Safari and Opera 
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) { // IE/Edge 
    element.msRequestFullscreen();
  }
}

function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) { // Firefox 
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera 
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { // IE/Edge 
    document.msExitFullscreen();
  }
}

            

              
                Copy
              
            
          

To'liq ekranli API'ning qo'llanilish holatlari va sohalari

To'liq ekranli API turli sanoat va sohalarda keng ko'lamli qo'llanilishga ega.

Video striming

Video striming platformalari o'z foydalanuvchilariga qamrab oluvchi ko'rish tajribasini taqdim etish uchun To'liq ekranli API'ga qattiq tayanadi. Videolarni to'liq ekranda ko'rsatishga ruxsat berish orqali ular chalg'ituvchi narsalarni yo'q qiladi va kinematografikroq tuyg'u yaratadi. YouTube, Netflix va Vimeo kabi mashhur platformalar To'liq ekranli API'dan foydalanadi.

O'yinlar

O'yinlarda to'liq ekran rejimi o'yinchining qamrab olinishini maksimal darajada oshirish va optimal o'yin tajribasini ta'minlash uchun zarurdir. To'liq ekranli API o'yinlarga butun ekranni egallashga imkon beradi, bu esa yanada jozibali va vizual jihatdan jozibador muhit yaratadi.

Taqdimotlar

To'liq ekranli API, shuningdek, taqdimotlar uchun qimmatlidir, bu esa taqdimotchilarga o'z slaydlarini to'liq ekran rejimida ko'rsatish, chalg'ituvchi narsalarni yo'q qilish va tinglovchilar e'tiborini qaratish imkonini beradi. Microsoft PowerPoint va Google Slides kabi dasturlar shunga o'xshash API'lar tomonidan quvvatlanadigan to'liq ekranli taqdimot variantlarini taklif qiladi.

Kiosk rejimi

Jamoat axborot displeylari, interaktiv ko'rgazmalar va chakana savdo kiosklari kabi kiosk rejimidagi ilovalar ko'pincha nazorat qilinadigan va yo'naltirilgan foydalanuvchi tajribasini yaratish uchun to'liq ekran funksiyasini talab qiladi. To'liq ekranli API ilovaning butun ekranni egallashini va foydalanuvchilarning tizimning boshqa qismlariga kirishini oldini oladi.

Rasm galereyalari

Rasmlarni galereyada to'liq ekran rejimida ko'rsatish foydalanuvchilarga har bir rasmning tafsilotlari va go'zalligini chalg'imasdan baholash imkonini beradi. Ko'pgina onlayn fotografiya portfollari va elektron tijorat saytlari mahsulot rasmlarini namoyish qilish uchun to'liq ekrandan foydalanadi.

Ma'lumotlarni vizualizatsiya qilish panellari

Murakkab ma'lumotlarni vizualizatsiya qilish panellari to'liq ekran rejimidan katta foyda oladi, bu esa tartibsizliksiz keng qamrovli diagrammalar, grafiklar va asosiy samaradorlik ko'rsatkichlarini (KPI) ko'rsatish uchun keng ekran maydonini taklif etadi. Bu biznes razvedkasi vositalarida keng tarqalgan.

To'liq ekranli API'dan foydalanish bo'yicha eng yaxshi amaliyotlar

To'liq ekranli API'dan foydalanishda silliq va foydalanuvchi uchun qulay tajribani ta'minlash uchun quyidagi eng yaxshi amaliyotlarni ko'rib chiqing:

Foydalanuvchi tomonidan boshlangan to'liq ekran so'rovlari

Har doim to'liq ekran rejimini boshlash uchun foydalanuvchi aralashuvini (masalan, tugmani bosish) talab qiling. Foydalanuvchi roziligisiz avtomatik ravishda to'liq ekranga kirish bezovta qiluvchi va g'ashga teguvchi bo'lishi mumkin. Ko'pgina brauzerlar xavfsizlik nuqtai nazaridan avtomatik to'liq ekranga o'tishni oldini oladi.

Aniq chiqish mexanizmi

Foydalanuvchilarga to'liq ekran rejimidan chiqish uchun aniq va oson kirish mumkin bo'lgan usulni taqdim eting. Ko'zga ko'rinadigan "To'liq ekrandan chiqish" tugmasi yoki klaviatura yorlig'i (masalan, Esc tugmasi) mavjud bo'lishi kerak.

Adaptiv dizaynni hisobga olish

Kontentingiz to'liq ekran rejimida turli ekran o'lchamlari va ruxsatlariga yaxshi moslashishiga ishonch hosil qiling. Turli qurilmalar uchun tartib va taqdimotni optimallashtirish uchun adaptiv dizayn texnikalaridan foydalaning.

Foydalanish imkoniyatlarini hisobga olish

To'liq ekran tajribalarini loyihalashda foydalanish imkoniyatlarini hisobga oling. Barcha interaktiv elementlarga klaviatura va ekran o'quvchilari orqali kirish mumkinligiga ishonch hosil qiling. Rasmlar uchun muqobil matnni taqdim eting va etarli rang kontrastini ta'minlang.

Xatoliklarni qayta ishlash

To'liq ekran rejimi yoqib bo'lmaydigan vaziyatlarni chiroyli tarzda boshqarish uchun to'g'ri xatoliklarni qayta ishlashni amalga oshiring. Foydalanuvchiga ma'lumot beruvchi xato xabarlarini ko'rsating va muqobil variantlarni taqdim eting.

Turli brauzerlar va qurilmalarda sinovdan o'tkazish

Muvofiqlik va izchil foydalanuvchi tajribasini ta'minlash uchun to'liq ekran ilovangizni turli brauzerlar va qurilmalarda sinchkovlik bilan sinab ko'ring.

To'liq ekranli API'ning ilg'or texnikalari

Asosiy amalga oshirishdan tashqari, To'liq ekranli API foydalanuvchi tajribasini yaxshilaydigan ilg'or texnikalarni taklif etadi.

To'liq ekran parametrlari (Taqdimot so'rovi)

`requestFullscreen()` metodi ba'zi zamonaviy brauzerlarda ixtiyoriy `FullscreenOptions` lug'atini qabul qilishi mumkin. Bu sizga `navigationUI` (brauzer navigatsiya elementlarining ko'rinishini nazorat qilish uchun) kabi variantlarni belgilash imkonini beradi.

            element.requestFullscreen({ navigationUI: "hide" }); // Brauzer navigatsiya UI'sini yashirish (agar qo'llab-quvvatlansa)
            

              
                Copy
              
            
          

`FullscreenOptions`ni qo'llab-quvvatlash brauzerlar bo'yicha farq qilishini yodda tuting, shuning uchun sinchkovlik bilan sinovdan o'tkazish muhim.

To'liq ekranli elementlarga uslub berish

Elementlar to'liq ekran rejimida bo'lganda ularga maxsus uslub berish uchun CSS'dan foydalanishingiz mumkin. `:fullscreen` psevdo-sinfi faqat element to'liq ekranda bo'lganda kuchga kiradigan uslublarni qo'llash imkonini beradi.

            :fullscreen {
  background-color: black;
  color: white;
}

#myElement:fullscreen {
  /* #myElement uchun to'liq ekrandagi maxsus uslublar */
}

            

              
                Copy
              
            
          

To'liq ekran qo'llab-quvvatlanishini dasturiy aniqlash

To'liq ekranli API'dan foydalanishga urinishdan oldin, brauzer uni qo'llab-quvvatlashini tekshirish yaxshi amaliyotdir. Buni `document` va element obyektlarida tegishli xususiyatlar va metodlarning mavjudligini tekshirish orqali amalga oshirishingiz mumkin.

            function isFullscreenSupported() {
  return (
    document.fullscreenEnabled ||
    document.mozFullScreenEnabled ||
    document.webkitFullscreenEnabled ||
    document.msFullscreenEnabled
  );
}

if (isFullscreenSupported()) {
  // To'liq ekranli API qo'llab-quvvatlanadi
} else {
  // To'liq ekranli API qo'llab-quvvatlanmaydi
  alert('To\'liq ekran rejimi brauzeringiz tomonidan qo\'llab-quvvatlanmaydi.');
}

            

              
                Copy
              
            
          

Xulosa

To'liq ekranli API qamrab oluvchi va jozibali foydalanuvchi tajribalarini yaratishni maqsad qilgan veb-dasturchilar uchun qimmatli boylikdir. Uning imkoniyatlarini o'zlashtirish va eng yaxshi amaliyotlarga rioya qilish orqali siz foydalanuvchilarni o'ziga jalb qiladigan va ularning veb-ilovalaringiz bilan o'zaro ta'sirini yaxshilaydigan jozibali kontentni taqdim etishingiz mumkin. Video striming va o'yinlardan tortib taqdimotlar va kiosk rejimlari-gacha, To'liq ekranli API haqiqatan ham unutilmas onlayn tajribalarni yaratish uchun imkoniyatlar dunyosini ochadi. To'liq ekranning kuchini qabul qiling va veb-dasturlash loyihalaringizni yangi cho'qqilarga ko'taring.